<template>
  <div>
    <div class="title">
      <text class="title-item">统计时间</text>
      <radio  v-model="selectedValue"
              :items="items"
              selectedColor="#979797"
              fontSize="29"
              iconSize="32"
              color="#3EAFFC"
              @afterChange="onSelect"></radio>
    </div>
    <wxc-tab-bar :tab-titles="tabTitles"
               :tab-styles="tabStyles"
               title-type="text">
      <div class="item-container">
        <grid :head="gridHead" :grid="gridData"/>
      </div>
      <div class="item-container">
        <bmchart :options="$format(lineChartInfo)" style="flex:1;"></bmchart>
      </div>
      <div class="item-container">
        <bmchart :options="$format(barChartInfo)" style="flex:1;"></bmchart>
      </div>
      <div class="item-container">
        <bmchart :options="$format(cycleInfoTotal)" style="flex:1;"></bmchart>
        <bmchart :options="$format(cycleInfoClean)" style="flex:1;"></bmchart>
      </div>
    </wxc-tab-bar>
  </div>
</template>

<style scoped>
  .item-container {
    width: 750px;
  }
  .title {
    flex-direction: row;
    align-items: center;
    background-color: white;
  }
  .title-item {
    color: #3EAFFC;
    padding: 0 15px;
  }
</style>
<script>
  import WxcTabBar from '@/components/tabBar'
  import radio from '@/components/radio'
  import grid from '@/components/scrollGrid'
  import ajax from '@/net/energyAnalysis'
  import { CTCE_USER_INFO } from '@/config/storageTypes.js'
  import { getCache } from '@/util/storageUtils'

  export default {
    components: { WxcTabBar, radio, grid },
    data () {
      return {
        adcd: '',
        tabTitles: [
          {
            title: '统计报表'
          },
          {
            title: '折线图'
          },
          {
            title: '柱状图'
          },
          {
            title: '饼状图'
          }
        ],
        tabStyles: {
          bgColor: '#FFFFFF',
          titleColor: 'rgba(204,204,204,1)',
          activeTitleColor: '#FFFFFF',
          activeBgColor: 'rgba(62,175,252,1)',
          width: 187.5,
          height: 70,
          fontSize: 29,
        },
        selectedValue:"1",
        items:[
          { value:"1", title:'年' },
          { value:"2", title:'月' },
          { value:"3", title:'日' }
        ],
        gridHead: [
          { name: 'XZQHMC', value: '行政区划'},
          { name: 'CNT', value: '安装数量'},
          { name: 'EDGL', value: '装机总功率(千瓦)'},
          { name: 'BZM_OLD', value: '传统方式消耗标准煤(吨)'},
          { name: 'BZM_NEW', value: '清洁能源折算标准煤(吨)'},
          { name: 'YDL', value: '清洁能源能耗(万千瓦时)'},
          { name: 'JIANSHAO_BZM', value: '标准煤减少量(吨)'}
        ],
        gridData: []
      }
    },
    computed: {
      xData () {
        return this.getItemArr('XZQHMC')
      },
      coal () {
        return this.getItemArr('BZM_OLD')
      },
      clean () {
        return this.getItemArr('BZM_NEW')
      },
      reduce () {
        return this.getItemArr('JIANSHAO_BZM')
      },
      total () {
        return this.getPieArr('EDGL')
      },
      cleanPie () {
        return this.getPieArr('YDL')
      },
      lineChartInfo () {
        return {
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data:['煤取暖', '清洁能源', '减排量']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.xData
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
                  name: '煤取暖',
                  type: 'line',
                  data: this.coal
              },
              {
                  name: '清洁能源',
                  type: 'line',
                  data: this.clean
              },
              {
                  name: '减排量',
                  type: 'line',
                  data: this.reduce
              }
          ]
        }
      },
      barChartInfo () {
        return {
          legend: {
              data:['煤取暖', '清洁能源', '减排量']
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  data: this.xData,
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '煤取暖',
                  type: 'bar',
                  data: this.coal
              },
              {
                  name: '清洁能源',
                  type: 'bar',
                  data: this.clean
              },
              {
                  name: '减排量',
                  type: 'bar',
                  data: this.reduce
              }
          ]
        }
      },
      cycleInfoTotal () {
        return {
          title: {
              text: '装机总功率',
              right: '2%',
              top: '2%'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          series: [
            {
              name: '装机总功率',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: this.total
            }
          ]
        }
      },
      cycleInfoClean () {
        return {
          title: {
              text: '清洁能源能耗',
              right: '2%',
              top: '2%'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          series: [
            {
              name: '清洁能源能耗',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: this.cleanPie
            }
          ]
        }
      }
    },
    methods: {
      loadData () {
        this.$notice.loading.show()
        ajax.getData({
          quyxzqhdm: this.adcd,
          T0LB: this.selectedValue
        }).then(res => { 
          this.gridData = res.datalist
          this.$nextTick(() => {
            this.$notice.loading.hide()
          })
        })
      },
      onSelect () {
        this.loadData()
      },
      getItemArr (str) {
        let arr = []
        this.gridData.forEach((value, index) => {
          if (index !== 0) {
            arr.push(value[str])
          }
        })
        return arr
      },
      getPieArr (str) {
        let arr = []
        this.gridData.forEach((value, index) => {
          if (index !== 0) {
            arr.push({
              name: value.XZQHMC,
              value: value[str]
            })
          }
        })
        return arr
      }
    },
    created () {
      getCache(CTCE_USER_INFO).then(res => {
        const info = JSON.parse(res)
        this.adcd = info.xzqhdm
        this.loadData()
      })
    },
    beforeCreate () {
      this.$notice.loading.show()
      this.$navigator.setLeftItem({
        text: '   ',
        fontSize: '40',
        fontWeight: 'bold'
      }, () => {
        this.$router.back()
      })
    }
  }
</script>
